<template>
  <div id="login">
    <logo-head text="用户登陆" />
    <!-- 登陆表单 -->
    <van-form @submit="onSubmit" class="login_form">
      <van-field
        v-model="loginForm.username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"/>
      <van-field
        v-model="loginForm.password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"/>
        <div style="margin: 16px;">
          <van-button  block type="info" native-type="submit">
            立 即 登 陆
          </van-button>
        </div>
    </van-form>
    <!-- 忘记密码和跳转到注册页面区域  -->
    <div class="van-hairline--top footer">
      <div class="register_wrap">没有账号？<span @click="navToRegister">我要注册</span></div>
      <div class="forget_pass" @click="NavToForgetPass">忘记密码</div>
    </div>

  </div>
</template>

<script>
import LogoHeadVue from '../components/LogoHead.vue'
export default {
  name: 'login',
  components: {
    'logo-head': LogoHeadVue
  },
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    /**
     * 业务：登陆
     */
    login () {
      console.log('登陆页面的登陆方法')
    },
    // 点击表单提交
    onSubmit (value) {
      console.log('点击表单', value)
    },
    // 跳转到注册页面
    navToRegister () {
      this.$router.push('/register')
    },
    // 跳转到忘记密码页面
    NavToForgetPass () {
      this.$router.push('/forget')
    }
  }
}
</script>

<style lang="less" scoped>
#login{
  width:100%;
  .footer{
    width:100%;
    padding:5px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .register_wrap{
      font-size: 14px;
      span{
        color:#5ba0f4;
      }
    }
    .forget_pass{
      font-size: 14px;
      color: #5ba0f4;
    }
  }
}
</style>
